<template>
  <div id="app">
    <button @click="getBooks">Get Books</button>
    <ul>
      <li v-for="item in books" :key="item.id">
        {{item.id}} :《{{item.name}}》
        </li>
    </ul>
  </div>
</template>

<script>
import Axios from 'axios'
Axios.defaults.baseURL = 'http://demo-api.geekfun.website';

export default {
  data() {
    return {
      books:[]
    }
  },
  methods: {
    getBooks() {
      Axios.get(
        '/vue-bs/get-books.aspx'
      )
      .then((response) =>
        Axios.all(
          response.data.map(
            id=>Axios.get(
              '/vue-bs/get-book.aspx',
              {params:{id}}
            )
          )
        )
        .then(
          Axios.spread(
            (...responses) => responses.forEach(
              response => this.books.push(response.data)
            )
          )
        )
        .catch((error) => console.log(error))
      )
      .catch((error) => console.log(error));
    }
  }
}
</script>
